<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 
    什么是 Attributes 

      Vue3:
        传递给组件的属性与事件,如果没有被 props 或 emits 声明过,那么它就是一个 Attribute

      Vue2:
        传递给组件的属性,如果没有被 props 声明过,那么它就是一个 Attribute

    Attribute 特性, 会自动继承到组件的根元素上.
        1. 通过审查元素,可以观察到.[事件是看不到的]

        2. 可以通过设置 inheritAttrs: false 禁用继承

        3. 组件如果有多个根元素,则会报错,因为不知道要继承到那个元素身上
            Vue2的组件有且仅能有一个根元素,Vue3增加了Fragment特性,所以支持多个根元素

        4. 能否主动控制将这些 attrs 继承到其它元素上呢?
            在想要的元素上,通过设置 v-bind="$attrs" 即可

            如果只想继承某个 attr 呢?
            v-bind:b="$attrs.b"

   -->

    <div id="app"></div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      const app = createApp({
        template: `
          <Hello class="box" style="color: red" id="my" a="a" b="b" c="c" @change="handleChange" @update="handleUpdate" />


          <BBB age="18" />
        `,

        methods: {
          handleChange() {},
          handleUpdate() {},
        },
      });

      app.component("AAA", {
        props: ["age"],

        template: `
          <div>
            <h2>AAA</h2>  
          </div>
        `,
      });

      app.component("BBB", {
        template: `
          <AAA age="18" />
        `,
      });

      app.component("Hello", {
        // inheritAttrs: false, // 禁用 Attrs 继承

        props: ["a"],

        emits: ["change"],

        // template: `
        //   <div>
        //     <h2 v-bind="$attrs">Hello</h2>
        //   </div>

        //   <div>
        //     <button v-bind:b="$attrs.b">点我</button>
        //   </div>
        // `,

        template: `
          <div class="self" b="selfB">
            <h2>Hello</h2>  
          </div>
        `,

        created() {
          console.log("props", this.$props);
          console.log("attrs", this.$attrs);
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
